<template>
	<view class="hb-comment">
		<!-- 顶部文案 begin -->
		<view class="reply-nav">
			<view class="repley-nav-left">
				<text>评论区({{commentData.totalNum}})</text>
			</view>
			<view class="repley-nav-right"><text :class="currentTagLeft" @tap="chooseNew(0)" >最新</text><text style="margin-left: 10rpx;margin-right: 10rpx;">|</text><text :class="currentTagRight" @tap="chooseNew(1)" >热门</text></view>
		</view>
		<!-- 顶部文案 end -->
		<!-- 评论主体-start -->
		<view class="comment-list" v-if="commentData.comment.length != 0">
			<!-- 评论列表-start -->
			<view class="comment-box" v-for="(item, index) in commentData.comment">
				<view class="comment-box-item">
					<view>
						<image :src="item.avatarUrl || emptyAvatar" mode="aspectFill" class="avatar"></image>
					</view>
					<view class="comment-main">
						<!-- 父评论体-start -->
						<view class="comment-main-top">
							<view class="nick-name-box">
								<view class="nick-name">{{item.nickName}}</view>
							</view>
							<view class="zan-box" @click="like(item.id)">
								<span :class="item.hasLike ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</span>
								<i class="zi zi_digg like-ico " v-if="!item.hasLike"></i>
								<i class="zi zi_digg like-ico" style="color: coral;" v-else="!item.hasLike"></i>
							</view>
						</view>
						<view class="comment-main-content">
							{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}
							<span v-if="item.content.length > 60">
								{{item.hasShowMore ? item.content.slice(59) : '...'}}
								<span class="foot-btn" @click="showMore(item.id)">
									{{item.hasShowMore ? '收起' : '展开'}}
								</span>
							</span>
						</view>
						<view class="comment-main-foot">
							<view class="foot-time">{{item.createTime}}</view>
							<view class="foot-btn">{{item.position}}</view>
							<view class="foot-btn" @click="reply(item.nickName,item.nickName,item.id)">回复</view>
						</view>
						
						<!-- 父评论体-end -->
						<!-- 子评论列表-start -->
						<view class="comment-sub-box">
							<view class="comments-more" @click="showMoreChidrens(item)" v-if="item.replyCount > 0 && item.hideChildren">
								<text style="margin-right: 10rpx;font-size:36rpx;">—</text>
								<text>展开{{item.replyCount}}条回复</text>
							</view>
							<view class="comment-sub-item" v-for="each in item.children" v-if="item.hideChildren == false">
								<view>
									<image :src="each.avatarUrl || emptyAvatar" mode="aspectFill" class="avatar">
									</image>
								</view>
								<view class="comment-main">
									<view class="sub-comment-main-top">
										<view class="nick-name">{{each.nickName}}</view>
										<view class="zan-box" @tap="like(each.id)">
											<span :class="each.hasLike ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</span>
											<i class="zi zi_digg like-ico " v-if="!each.hasLike"></i>
											<i class="zi zi_digg like-ico" style="color: coral;" v-else="!each.hasLike"></i>
										</view>
									</view>
									<view class="comment-main-content">
										<text class='reply-name' v-if='each.replyName'>@{{each.replyName}}</text>
										{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
										<span v-if="each.content.length > 60">
											{{each.hasShowMore ? each.content.slice(59) : '...'}}
											<span class="foot-btn" @tap="showMore(each.id)">
												{{each.hasShowMore ? '收起' : '展开'}}
											</span>
										</span>
									</view>
									<view class="comment-main-foot">
										<view class="foot-time">{{each.createTime}}</view>
										<view class="foot-btn">{{item.position}}</view>
										<view class="foot-btn" @click="reply(item.nickName,each.nickName,item.id)">
											回复</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 子评论列表-end -->
					</view>
				</view>
			</view>
			<!-- 评论列表-end -->
		</view>
		<!-- 评论主体-end -->
		<!-- 无评论-start -->
		<view class="comment-none" v-else>
			暂无评论，<span @click="commentInput" style="color: #007AFF;">抢沙发</span>
		</view>
		<!-- 无评论-end -->
		<!-- 新增评论-start -->
		<view class="comment-submit-box" v-if="submit" @click="closeInput">
			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
				<view class="comment-submit">
					<view class="btn-click cancel" @click="closeInput">取消</view>
					<view>
						<view>回复 {{pUser}}</view>
					</view>
					<view>
						<view class="btn-click" @click="add">发布</view>
					</view>
				</view>
				<textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder" :adjust-position="false" :show-confirm-bar="false"
					@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
			</view>
		</view>
		<!-- 新增评论-end -->
		
		<view class="xuanfu">
			<uni-fab ref="fab" :pattern="btnPattern" :content="btnContent" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'hb-comment',
		props: {
			cmData: {
				type: Object,
				default: () => {
					return null;
				}
			},
			replyType: {
				type: Number,
				default: () => {
					return 1;
				}
			},
			deleteTip: {
				type: String,
				default: () => {
					return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';
				}
			},
		},
		watch: {
			cmData: {
				handler: function(newVal, oldVal) {
					this.init(newVal);
				},
				immediate: true
			}
		},
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				btnContent: [
					{
						icon: 'zi_digg',
						text: '点赞',
						color: 'green',
						active: false
					},
					{
						icon: 'zi_msgchat',
						text: '评论',
						color: 'red',
						active: false
					},
					// #ifdef H5
					{
						icon: 'zi_sharealtsquare',
						text: '分享',
						color: '#007AFF',
						active: false
					}
					// #endif
				],
				btnPattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#00CEFF',
					buttonColor: '#00CEFF',
					iconColor: '#fff'
				},
				"emptyAvatar": "",
				"commentData": null,
				"placeholder": "请输入评论",
				"commentReq": {
					"pId": null, // 评论父id
					"content": null // 评论内容
				},
				"pUser": null, // 标签-回复人
				"showTag": false, // 标签展示与否
				"focus": false, // 输入框自动聚焦
				"submit": false, // 弹出评论
				"KeyboardHeight": 0 ,// 键盘高度
				'currentTagLeft': '',//左侧选中样式
				'currentTagRight': '',//右侧选中样式
				
			};
		},
		mounted: function() {
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height;
			})
		},
		created() {
			this.chooseNew(0)
		},
		methods: {
			trigger(e) {
				switch(e.index) {
					case 0:
					   //点赞
					   break
					case 1: 
					   //评论，打开评论框
					   this.submit = true
					   break
					case 2: 
					   //分享，打开分享面板
					   break
				}
			},
			fabClick() {
				console.info('open dia')
			},
			showMoreChidrens(data) {
				data.hideChildren = false
			},
			chooseNew(num) {
				if (num === 0) {
					this.currentTagLeft = 'text-weight'
					this.currentTagRight = ''
				} else {
					this.currentTagLeft = ''
					this.currentTagRight = 'text-weight'
				}
			},
			// 初始化评论
			init(cmData) {
				// for (var i in cmData.comment) {
				// 	cmData.comment[i].hasShowMore = false;
				// 	for (var j in cmData.comment[i].children) {
				// 		cmData.comment[i].children[j].hasShowMore = false;
				// 	}
				// }
				this.commentData = cmData;
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 回复评论
			reply(pUser, reUser, pId) {
				this.pUser = pUser;
				this.commentReq.pId = pId;
				this.commentReq.content = '';
				this.showTag = true;
				this.commentInput();
			},
			// 新增评论
			add() {
				if (this.commentReq.content == null || this.commentReq.content.length < 2) {
					uni.showToast({
						title: '评论内容过短',
						duration: 2000
					});
					return
				}
				this.$emit('add', this.commentReq);
			},
			// 点赞评论
			like(commentId) {
				this.$emit('like', commentId);
			},
			// 新增完成
			addComplete() {
				this.commentReq.content = null;
				this.tagClose();
				this.closeInput();
			},
			// 点赞完成-本地修改点赞结果
			likeComplete(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData
							.comment[i].likeNum++;
						this.commentData.comment[i].hasLike = !this.commentData.comment[i].hasLike;
						return
					}
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children[j].hasLike ? this.commentData.comment[i].children[j]
								.likeNum-- : this.commentData.comment[i].children[j].likeNum++;
							this.commentData.comment[i].children[j].hasLike = !this.commentData.comment[i].children[j]
								.hasLike;
							return
						}
					}
				}
			},
			// 删除完成-本地删除评论
			deleteComplete(commentId) {
				for (var i in this.commentData.comment) {
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children.splice(Number(j), 1);
							return
						}
					}
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment.splice(Number(i), 1);
						return
					}
				}
			},
			// 展开评论
			showMore(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
						this.$forceUpdate();
						return
					}
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children[j].hasShowMore = !this.commentData.comment[i].children[j]
								.hasShowMore;
							this.$forceUpdate();
							return
						}
					}
				}
			},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 标签关闭
			tagClose() {
				this.showTag = false;
				this.pUser = null;
				this.commentReq.pId = null;
			},
			// 输入评论
			commentInput() {
				// TODO 调起键盘方法
				this.submit = true;
				setTimeout(() => {
					this.focus = true;
				}, 50)
			},
			// 关闭输入评论
			closeInput() {
				this.focus = false;
				this.submit = false;
				this.commentReq.content = ''
			}
		}
	};
</script>

<style lang="scss" scoped>
	.reply-nav {
		padding: 10rpx 0rpx 10rpx 0rpx;
		font-size: 30rpx !important;
		line-height: 60rpx;
		font-weight: bold;
		background: #fff;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 50px;
		justify-content: space-between;
	}
	
	.repley-nav-left {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
	}
	
	.repley-nav-right {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}
	
	.hb-comment {
		background-color: #FFFFFF;
	}

	.top-read {
		font-size: 28rpx;
		padding-left: 10rpx;
		color: #999999;
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
		width: 100%;
	}

	.comment-main-top {
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.sub-comment-main-top {
		width: 100%;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.comLogo {
		margin-right: 18rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: #d218b1;
	}

	.com2 {
		background-color: #f19c0b;
	}

	.com3 {
		background-color: #c8da85;
	}

	.com4 {
		background-color: #bfd0da;
	}

	.nick-name {
		color: #8D8C91;
		font-weight: bold;
	}

	.isLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2d8cf0;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #999999;
	}
	
	.zan-box {
	}
	
	.zan-box .like-ico {
		font-size: 28rpx;
	}

	.comment-main-content {
		padding: 5rpx 10rpx 10rpx 0;
	}
	
	.comment-main-content .reply-name {
		font-weight: bold;
		margin-right: 10rpx;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;
	}

	.replayTag {
		color: #909399;
		margin-bottom: 5px;
		border: 1px solid #c8c9cc;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16rpx;
		padding: 5px 10px;
	}

	.replyTagClose {
		font-size: 20px;
		line-height: 12px;
		padding: 0 0 2px 5px;
	}
	
	.foot-time {
		line-height: 25rpx;
	}

	.foot-btn {
		padding-left: 30rpx;
		color: #8D8C91;
		line-height: 25rpx;
	}

	.comment-sub-box {
		padding: 20rpx 0;
	}
	
	.comments-more {
		color: red;
	}

	.comment-sub-item {
		margin-top: 10rpx;
		display: flex;
	}

	.comment-none {
		padding: 20rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		border: 1px solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}

	.btn-click {
		color: red;
		font-size: 28rpx;
		padding: 10rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 100px;
		padding: 16rpx;
		width: 100%;
	}

	.comment-submit {
		padding: 5rpx 20rpx 0 20rpx;
		border-bottom: 1px dashed #ddd;
		width: calc(100% - 40rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
